<template>
  <div class="import-dialog-view">
    <div class="import-dialog">
      <div class="title">
        <p>Excelのインポート（{{ title }}）</p>
        <i class="el-icon-close" @click="$emit('CloseImportDiloag')"></i>
      </div>
      <div class="import-dialog-body">
        <el-upload class="upload-demo" drag :action="action" :multiple="false" ref="upload" style="textalign: center"
          :on-error="uploadFalse" :on-success="uploadSuccess" :auto-upload="false" :before-upload="beforeAvatarUpload"
          :data="form" :file-list="fileList" :headers="token">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            ここにドラッグあるいはアップロード
            <!-- ここにドラッグ或
            <em>{{ $t("message.homePageTable.finishedFile") }}</em> -->
          </div>
        </el-upload>

        <span slot="footer" class="dialog-footer">
          <el-button @click="onCancel" class="btn">
            {{ $t("message.public.cancel") }}
          </el-button>
          <el-button type="primary" class="btn" @click="submitUpload()">
            {{ $t("message.public.confirm") }}
          </el-button>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import BASE from "@/utils/base";
import { getLocalStorage } from "@/utils/storage";
import eventBus from "@/eventBus/bus";
export default {
  name: "ImportDialog",
  props: ["title", "_api"],
  data() {
    return {
      form: {
        account: getLocalStorage("userName"),
        userID: getLocalStorage("userID"),
        isExist: false
      },
      fileList: [],
      action: BASE.IP + this._api,
      token: {
        Authorization:
          "Bearer " +
          (sessionStorage.token && getLocalStorage("token")
            ? sessionStorage.token
            : ""),
      }
    };
  },
  components: {},
  watch: {},
  methods: {
    //文件上传失败触发
    uploadFalse(response, file, fileList) {

      this.$alert('システムエラーが発生しました。ご迷惑をお掛けして申し訳御座いません。システム管理者に問い合わせください。', '', {
        confirmButtonText: 'OK',
        type: 'warning',
      });
    },
    //文件上传成功触发
    uploadSuccess(response, file, fileList) {

      if (response.code == 0) {
        this.fileList = [];
        this.$message({
          // message: this.$t("message.homePageTable.suploaded"),
          message: response.msg,
          type: "success",
        });
        eventBus.$emit("refreshTable");
        return
      }
      if (response.code == -311) {

        window.open(response.data)
        return
      }
      if (response.code == -300) {
        this.$alert(response.msg, '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });
        return
      }
      if (response.code == 452) {
        this.$alert(response.msg, {
          confirmButtonText: 'OK',
          type: 'warning',
        });
        return
      } else {
        this.$alert(response.msg, '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });
      }
    },
    // 上传前対文件的大小和类型的判断
    beforeAvatarUpload(file) {
      console.log(file.size);
      this.onCancel();
      if (file.size > 524288000) {
        this.$alert(this.$t('message.public.tip2'), '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });
        return false;
      }

    },
    //表单提交
    submitUpload() {
      if (!this._api) {
        this.$alert("In function development...", '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });
        return;
      }
      this.$refs.upload.submit();
    },
    //表单取消
    onCancel() {
      this.fileList = [];
      this.$emit("CloseImportDiloag");
    },
  },
  created() { },
  mounted() { },
  beforeDestroy() { },
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.import-dialog-view {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 6;

  .import-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 488px;
    min-height: 393px;
    background: #ffffff;
    box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
      0px 9px 28px 0px rgba(0, 0, 0, 0.08),
      0px 6px 16px -8px rgba(0, 0, 0, 0.15);

    .title {
      // width: 100%;
      height: 42px;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      font-size: 16px;

      p {
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
      }

      .el-icon-close {
        cursor: pointer;
      }
    }
  }

  .upload-demo {
    width: 360px;
    margin: 0 auto;
    margin-top: 24px;
  }

  .check-view {
    margin: 36px 24px 0 24px;
    height: 32px;
    padding: 0 18px;
    background: #f0f0f0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .dialog-footer {
    margin: 24px 0;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
      width: 82px !important;
      height: 32px;
      // background: #ffffff;
      // border: 1px solid #d9d9d9;
      // cursor: pointer;
    }

    button:nth-child(2) {
      // margin-left: 16px;
      // color: #ffffff;
      // background: #106ebe;
    }

    ::v-deep .el-button:hover,
    .el-button:focus {
      // color: none;
    }
  }
}
</style>
